<template>
  <div
    class="room-content"
    :style="{ top: GLOBAL.currentEnvironment ? '0' : '46px' }"
  >
    <Search
      style="padding-top:0.1rem"
      ref="topSearch"
      class="search"
      :placeholder="!isPrint ? '物品编号|物品名称|规格' : '物品编号|物品名称'"
      :isAdd="false"
      :isScreen="false"
      :isType="true"
      @onSearch="onSearch"
      v-show="!remove"
    ></Search>
    <div class="title-inventory" v-show="remove">
      <span class="leftText">{{
        goodsRemoveLattice.latticeCode + "|" + goodsRemoveLattice.latticeName
      }}</span>
      <span class="rightText">共{{ goodsRemoveData.length }}，合计{{ goodsNumSum }}</span>
    </div>
    <!--分页列表 -->
    <div class="listBox">
      <pageListak
        @getCheckedValue="getCheckedValue"
        ref="pageListak"
        :singelInfo="true"
        :operationTxt="operationTxt"
        :checkedShow="checkedShow"
        checkedShowText="全选"
        :columns="columns"
        :listUrl="listUrl"
        :goodsRemoveData="goodsRemoveData"
        :goodsRemoveLattice="goodsRemoveLattice"
        :remove="remove"
        :minLen="3"
      />
    </div>
  </div>
</template>

<script>
import Search from "@/components/search";
import pageListak from "@/components/pageList/pageListAk";

export default {
  components: { pageListak, Search },
  props: {
    listUrl: {
      //列表接口
      type: String,
      default: "",
    },
    columns: {
      type: Object,
      default: {
        titleKey: "goodsName", //标题
        content: [
          //内容
          {
            name: "物品编号",
            key: ["goodsCode"],
          },
          {
            name: "分类",
            key: ["categoryText"],
          },
        ],
        labelKey: ["typeText", "spec"], //标签
        operationText: "",
      },
    },
    selectedGoods: {
      type: Array,
      default: () => {
        return [];
      },
    },
    isPrint: {
      type: Boolean,
      default: false,
    },
    goodsRemoveData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    remove: {
      type: Boolean,
      default: false, //判断是不是移出库位物品列表
    },
    goodsRemoveLattice: {
      type: Object,
      default: () => {
        return {};
      },
    },
    idKey: {
      type: String,
      default: "goodsId",
    },
  },
  data() {
    return {
      keyword: "",
      filterForm: {},
      appTitle: "",
      checkedShow: true, //列表是否支持选择
      operationTxt: "确定", //选择按钮名称
      sumNumber: 0,
    };
  },
  watch: {
    // goodsRemoveData: {
    //   handler(v) {
    //     let sum = 0;
    //     v.forEach((val) => (sum += Number(val.goodsNum)));
    //     this.sumNumber
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },

  computed: {
    goodsNumSum() {
      let sum = 0;
      this.goodsRemoveData.forEach((val) => (sum += Number(val.goodsNum)));
      return sum;
    },
  },
  created() {},
  mounted() {
    let searchObj = {
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    // 获取选择的列表数据
    getCheckedValue(ids, selectArr) {
      if (selectArr.length > 0) {
        this.$emit("getCheckedGoods", selectArr);
      } else {
        this.$toast("请先选择数据");
      }
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.$refs.pageListak.searchQuery(params, this.selectedGoods, this.idKey);
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.capitalflow-topl {
  width: 50%;
  .flex(center, center);
  span {
    display: block;
    position: relative;
    font-size: 30px;
    color: #191f25;
  }
  span::after {
    position: absolute;
    top: 50%;
    right: -30px;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
}
.outBox {
  display: flex;
  background-color: #fff !important;
}
.room-content {
  height: calc(100vh - 0);
  width: 100%;
  overflow-y: scroll;
  position: fixed;
  background: #f5f5f5;
  z-index: 999;
  .serach {
    height: 66px;
    background: #f2f2f6;
    border-radius: 0;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 66px;
    padding: 20px 24px;
    // border: 1px solid red;
    .placeh {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 46px;
    }
    .icon {
      width: 30px;
      height: 32px;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 32px 0.32px 32px;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 4px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 46px;
        margin-right: 32px;
        text-align: center;
        padding: 8px 56px;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
.listBox {
  height: calc(100vh - 300px);
  overflow-y: auto;
}
.dialogContentBox {
  text-align: left;
  margin: 20px 38px;
  color: #191f25;
  font-size: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}
.title-inventory {
  display: flex;
  justify-content: space-between;
  margin-top: 0.2rem;
  background: #fff;
  height: 0.8rem;
  line-height: 0.8rem;
  span {
    font-size: 12px;
    color: #191f25;
    margin: 0 0.48rem;
    
  }
  .leftText {
    font-size: 32px;
  }
  .rightText {
    font-size: 24px;
  }
}
</style>
